<!-- meta tags and other links -->
<!-- Header -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title> Viserpet HTML Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/picture/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- Slick -->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!-- line awesome -->
    <link rel="stylesheet" href="assets/css/line-awesome.min.css">
    <!-- countdown css link-->
    <link rel="stylesheet" href="assets/css/jquery.classycountdown.min.css">
    <!-- range css -->
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <!-- magnific css link -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
    
<!--==================== Preloader Start ====================-->
<div class="preloader">
    <div class="loader-p"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Overlay Start ====================-->
<div class="body-overlay"></div>
<!--==================== Overlay End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="sidebar-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<!-- ==================== Scroll to Top End Here ==================== -->
<a class="scroll-top"><i class="fas fa-angle-double-up"></i></a>
<!-- ==================== Scroll to Top End Here ==================== -->

<!-- ==================== Header Top Start Here ==================== -->
<div class="header-top">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-between">    
            <div class="top-contact">
                <a href="index.html" class="top-contact__logo">
                    <img src="assets/picture/logo02.png" alt="logo">
                </a>
            </div>      
              <div class="d-flex flex-wrap align-items-center justify-content-center">
                   <div class="d-md-block d-none">
                    <div class="contact-list__wrapper d-flex flex-wrap justify-content-between">
                    <div class="contact-list style-two">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/phone.png" alt="">
                            </span>
                            <span class="contact-list__info"> 000 - 8888 - 9999</span>
                      </div>
                      <div class="contact-list">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/email.png" alt="">
                            </span>
                            <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="cabca3b9afb8baafbe8aada7aba3a6e4a9a5a7">[email&#160;protected]</a></span>
                    </div>
                    </div>
                   </div>
                   <div class="currency-box">
                    <select class="select">
                        <option selected="">USD</option>
                        <option value="1">EURO</option>
                        <option value="2">RUPI</option>
                        <option value="3">DINAR</option>
                    </select>
                   </div>
              </div>
           
        </div>
    </div>
</div>
<!-- ==================== Header Top End Here ==================== -->
<nav class="category-two">
    <span class="close-sidebar"><i class="las la-times"></i></span>
    <ul class="category-menu-two">
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/dog01.png" alt=""></span> Dog Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/cat.png" alt=""></span> Cat </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"> <span class="category-menu-two__thumb"><img src="assets/picture/fish.png" alt=""></span> Fish </a>
        </li>
        <li class="category-menu-two__item">                 
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/toys.png" alt=""></span> Pet toy </a>
        </li>
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/parrot.png" alt=""></span> Parrot Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="product-category.html" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/rabbit.png" alt=""></span> Rabbit </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/accessories.png" alt=""></span> Accessories </a>
        </li>
        <li class="category-menu-two__item">
            <a href="product-category.html" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/dog02.png" alt=""></span> Small pet </a>
        </li>
     </ul>
     <div class="contact-list__wrapper d-md-none d-block">
        <div class="contact-list">
             <span class="contact-list__icon">
                <img src="assets/picture/phone.png" alt="">
             </span>
             <span class="contact-list__info"> 000 - 8888 - 9999</span>
        </div>
        <div class="contact-list">
             <span class="contact-list__icon">
               <img src="assets/picture/email.png" alt="">
            </span>
             <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="dea8b7adbbacaebbaa9eb9b3bfb7b2f0bdb1b3">[email&#160;protected]</a></span>
        </div>
     </div>
</nav>

<!-- ==================== Bottom Header End Here ==================== -->
<header class="main-header">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <button class="navbar-toggler header-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span id="hiddenNav"><i class="las la-bars"></i></span>
            </button>
            <div class="header-category-two">
                <button class="header-category-two__item">Categories <span class="header-category-two__icon"><i class="las la-bars"></i></span></button>
               
            </div>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-menu me-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Home <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                         <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index.html"> Home One </a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index-two.html"> Home Two </a></li>
                         </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Pages <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                      <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-category.html">Product category</a></li>
                      </ul>
                      </li> 
                        <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog.html">Blog</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog-details.html">Blog Details</a>
                          </li>
                        </ul>
                        </li> 
  
                    <li class="nav-item">
                      <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                    <li class=" nav-item">
                      <div class="toggle-search-box d-none d-lg-block">
                          <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                      </div>
                    </li>
                </ul>
            </div>
            <div class="header-info">
                <div class="toggle-search-box d-lg-none d-block">
                    <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                </div>
              <div class="header-info__wishlist">
                 <a href="wishlist.html" class="header-info__link"><i class="far fa-heart"></i></a>
              </div>
              <div class="header-info__cart">
                     <a href="" class="header-info__link"><i class="fas fa-shopping-cart"></i></a>
                     <span class="header-info__cart-quantity">03</span>
              </div>
              <div class="header-info__user">
                 <a href="login.html" class="header-info__link"><i class="far fa-user"></i></a>
              </div>
           </div>
        </nav>
    </div>
  </header>
  <!-- ==================== Bottom Header End Here ==================== -->
  
   <!--========================== Search Modal Start ==========================-->

  <!--========================== Search Modal End ==========================-->

<!-- ==================== Breadcumb Start Here ==================== -->
<section class="breadcumb py-120 bg-img" style="background-image: url(../static/assets/picture/breadcumb-img.png);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="breadcumb__wrapper">
                    <h1 class="breadcumb__title"> Your Shoping Cart</h1>
                    <ul class="breadcumb__list">
                        <li class="breadcumb__item"><a href="index.html" class="breadcumb__link"> <i class="las la-home"></i> Home</a> </li>
                        <li class="breadcumb__item"> / </li>
                        <li class="breadcumb__item"> <span class="breadcumb__item-text"> Your Shoping Cart </span> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==================== Breadcumb End Here ==================== -->

<!-- ================cart-section start here================ -->
<!--<div class="cart-section py-120">-->
<!--    <div class="container">-->
<!--        <div class="row">-->
<!--            <div class="col-lg-12">-->
<!--                <div class="section-heading">-->
<!--                    <h3 class="section-heading__title style-two"> Your Cart Items <span class="section-heading__bars"></span></h3>-->
<!--                 </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="col-lg-12">-->
<!--                <table class="table table&#45;&#45;responsive&#45;&#45;lg cart-table">-->
<!--                  <thead>-->
<!--                    <tr>-->
<!--                        <th></th>-->
<!--                        <th>Product Name</th>-->
<!--                        <th>Until Price</th>-->
<!--                        <th>Qty</th>-->
<!--                        <th>Subtotal</th>-->
<!--                        <th>Delete</th>-->
<!--                        <th></th>-->
<!--                    </tr>-->
<!--                  </thead>-->


<!--                    <tbody>-->

<!--                    &lt;!&ndash;用thymleaf传送数据&ndash;&gt;-->
<!--                    <tr th:each="cartproduct, status : ${cartProducts}">-->

<!--                        &lt;!&ndash; 添加复选框列 &ndash;&gt;-->
<!--                        <td data-label="Select">-->
<!--                            <div class="form-check">-->
<!--                                <input type="checkbox" class="form-check-input" th:id="${'checkbox_' + status.index}" th:name="selectedItems" th:value="${cartproduct.getProductid()}">-->
<!--                                <label class="form-check-label" th:for="${'checkbox_' + status.index}"></label>-->
<!--                            </div>-->
<!--                        </td>-->

<!--                        <td data-label="Product Name">-->
<!--                            <div class="customer">-->
<!--                                <div class="customer__thumb">-->
<!--                                    <img th:src="${cartproduct.getImgurl()}" alt="">-->
<!--                                </div>-->
<!--                                <div class="customer__content">-->
<!--                                    <h6 class="customer__name" th:text="${cartproduct.getName()}"></h6>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </td>-->
<!--                        <td data-label="Until Price">-->
<!--                            <span th:text="${cartproduct.price}"></span>-->
<!--                        </td>-->
<!--                        <td data-label="Qty">-->
<!--                            <div class="qty-cart d-flex style-two">-->
<!--                                <div class="product-qty">-->
<!--                                    <button type="button" class="product-qty__decrement"><i class="las la-angle-down"></i></button>-->
<!--                                    <input type="number" th:name="number" class="product-qty__value" th:value="${cartproduct.number}">-->
<!--                                    <button type="button" class="product-qty__increment"><i class="las la-angle-up"></i></button>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </td>-->
<!--                        <td data-label="Subtotal"><span th:text="(${cartproduct.price} *${cartproduct.number})"></span></td>-->
<!--                        <td data-label="Delete">-->
<!--                            <button type="button" class="delete-icon" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete"><i class="las la-trash-alt"></i></button>-->
<!--                        </td>-->
<!--                        <td>-->
<!--                            <input type="number" th:value="${cartproduct.getUserid()}" th:name="userid" th:hidden="true">-->
<!--                            <input type="number" th:value="${cartproduct.getProductid()}" th:name="productid" th:hidden="true">-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    </tbody>-->





<!--                </table>-->




<!--            </div>-->
<!--        </div>-->

<!--        <div class="cart-btn-area d-flex justify-content-between flex-wrap">-->
<!--            <div class="shopping-cart mb-0">-->
<!--                <a href="index.html" class="btn btn&#45;&#45;base pill shopping-cart__pr mb-3">继续购物</a>-->
<!--                <input class="btn btn&#45;&#45;white pill shopping-cart mb-3 shopping-cart__update " value="更新购物车"></input>-->
<!--            </div>-->
<!--            <div class="clear-cart">-->
<!--                <a href="" class="btn pill btn&#45;&#45;white">清空购物车</a>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="col-lg-12">-->
<!--                <div class="order-summery ms-auto">-->
<!--                   <div class="order-summery__one d-flex justify-content-between">-->

<!--                   </div>-->
<!--                   <div class="order-summery__two d-flex justify-content-between">-->
<!--                     <h6 class="order-summery__title-two"> 总价 : </h6>-->
<!--                     <span   id="grand-total"   class="order-summery__number-two">$24000.00</span>-->
<!--                  </div>-->
<!--                  <div class="checkout">-->
<!--                    <a href="check-out.html" class="btn btn&#45;&#45;base pill">前往结账</a>-->
<!--                    <p class="checkout__desc">使用多地址结账</p>-->
<!--                  </div>-->

<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--<script>-->

<!--    document.addEventListener('DOMContentLoaded', function () {-->
<!--        calculateGrandTotal();-->
<!--    });-->

<!--    function calculateGrandTotal() {-->
<!--        var subtotalElements = document.querySelectorAll('.cart-table tbody tr td:nth-child(4) span');-->
<!--        var grandTotal = 0;-->

<!--        subtotalElements.forEach(function (element) {-->
<!--            var subtotal = parseFloat(element.textContent.replace(/[^0-9.-]+/g, "")); // 移除非数字字符-->
<!--            grandTotal += subtotal;-->
<!--        });-->

<!--        document.getElementById('grand-total').textContent ="$"+grandTotal.toFixed(2);-->
<!--    }-->

<!--    // 如果你想要在数量变化时更新总计，可以添加以下事件监听器-->
<!--    document.querySelectorAll('.product-qty__increment, .product-qty__decrement').forEach(function (button) {-->
<!--        button.addEventListener('click', function () {-->
<!--// 这里可以添加更新数量的逻辑-->
<!--            calculateGrandTotal(); // 重新计算总计-->
<!--        });-->
<!--    });-->


<!--    </script>-->


<!--        &lt;!&ndash; ===============cart section end here ==================&ndash;&gt;-->

<!--        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->

<!--<script>-->
<!--    document.addEventListener("DOMContentLoaded", function () {-->
<!--        // 绑定点击事件到 "UPDATE SHOPPING CART" 按钮-->
<!--        document.querySelector(".shopping-cart__update").addEventListener("click", function () {-->
<!--            // 获取所有购物车项-->
<!--            const cartItems = document.querySelectorAll(".cart-table tbody tr");-->
<!--            const cartData = [];-->

<!--            // 遍历每一行，提取 userid, productid, 和 number-->
<!--            cartItems.forEach(item => {-->
<!--                const userid = item.querySelector("input[name='userid']").value;-->
<!--                const productid = item.querySelector("input[name='productid']").value;-->
<!--                const number = item.querySelector("input[name='number']").value;-->

<!--                // 将数据添加到 cartData 数组中-->
<!--                cartData.push({-->
<!--                    userid: userid,-->
<!--                    productid: productid,-->
<!--                    number: number-->
<!--                });-->
<!--            });-->
<!--              console.log(cartData);-->
<!--            // 使用 AJAX 发送数据到后端-->
<!--            fetch("updateCart", {-->
<!--                method: "POST",-->
<!--                headers: {-->
<!--                    "Content-Type": "application/json"-->
<!--                },-->
<!--                body: JSON.stringify(cartData) // 将数据转换为 JSON 格式-->
<!--            })  .then(() => {-->
<!--                // 不需要验证返回的数据，直接显示弹框-->
<!--                alert("更新成功");-->
<!--                //刷新页面-->
<!--                location.reload();-->
<!--            })-->
<!--                .catch(error => {-->
<!--                    console.error("Error:", error);-->
<!--                    alert("更新失败，请重试。");-->
<!--                });-->



<!--        });-->
<!--    });-->

<!--</script>-->


<div class="cart-section py-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading">
                    <h3 class="section-heading__title style-two"> Your Cart Items <span class="section-heading__bars"></span></h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <table class="table table--responsive--lg cart-table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Product Name</th>
                        <th>Unit Price</th>
                        <th>Qty</th>
                        <th>Subtotal</th>
                        <th>Delete</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 使用 Thymeleaf 渲染购物车商品 -->
                    <tr th:each="cartproduct, status : ${cartProducts}">
                        <!-- 复选框 -->
                        <td data-label="Select">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input cart-checkbox"
                                       th:id="${'checkbox_' + status.index}"
                                       th:name="selectedItems"
                                       th:value="${cartproduct.getProductid()}"
                                       th:data-price="${cartproduct.price}"
                                       th:data-qty="${cartproduct.number}">
                                <label class="form-check-label" th:for="${'checkbox_' + status.index}"></label>
                            </div>
                        </td>
                        <!-- 商品名称 -->
                        <td data-label="Product Name">
                            <div class="customer">
                                <div class="customer__thumb">
                                    <img th:src="${cartproduct.getImgurl()}" alt="">
                                </div>
                                <div class="customer__content">
                                    <h6 class="customer__name" th:text="${cartproduct.getName()}"></h6>
                                </div>
                            </div>
                        </td>
                        <!-- 单价 -->
                        <td data-label="Unit Price">
                            <span class="unit-price" th:text="${cartproduct.price}"></span>
                        </td>
                        <!-- 数量 -->
                        <td data-label="Qty">
                            <div class="qty-cart d-flex style-two">
                                <div class="product-qty">
                                    <button type="button" class="product-qty__decrement"><i class="las la-angle-down"></i></button>
                                    <input type="number" class="product-qty__value" th:value="${cartproduct.number}" th:data-productid="${cartproduct.getProductid()}">
                                    <button type="button" class="product-qty__increment"><i class="las la-angle-up"></i></button>
                                </div>
                            </div>
                        </td>
                        <!-- 小计 -->
                        <td data-label="Subtotal">
                            <span class="subtotal" th:text="${cartproduct.price} * ${cartproduct.number}"></span>
                        </td>
                        <!-- 删除按钮 -->
                        <td data-label="Delete">
                            <button type="button" class="delete-icon">
                                <i class="las la-trash-alt"></i>
                            </button>
                        </td>
                        <!-- 隐藏字段 -->
                        <td>
                            <input type="number" th:value="${cartproduct.getUserid()}" th:name="userid" th:hidden="true">
                            <input type="number" th:value="${cartproduct.getProductid()}" th:name="productid" th:hidden="true">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="cart-btn-area d-flex justify-content-between flex-wrap">
            <div class="shopping-cart mb-0">
                <a href="index.html" class="btn btn--base pill shopping-cart__pr mb-3">继续购物</a>

            </div>
            <div class="clear-cart">
                <button type="button" class="btn pill btn--white clear-cart">清空购物车</button>
            </div>
        </div>

        <!-- 总价显示 -->
        <div class="row">
            <div class="col-lg-12">
                <div class="order-summery ms-auto">
                    <div class="order-summery__two d-flex justify-content-between">
                        <h6 class="order-summery__title-two">总价 : </h6>
                        <span id="grand-total" class="order-summery__number-two">$0.00</span>
                    </div>
                    <div class="checkout">
                        <a href="check-out.html" class="btn btn--base pill" id="checkout-button">前往结账</a>
                        <p class="checkout__desc">使用多地址结账</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    document.addEventListener('DOMContentLoaded', function() {
        // 删除单个商品
        document.querySelectorAll('.delete-icon').forEach(button => {
            button.addEventListener('click', function() {
                const productId = this.closest('tr').querySelector('input[name="productid"]').value;
                const userId = this.closest('tr').querySelector('input[name="userid"]').value;

                if (confirm('确定要删除这个商品吗？')) {
                    fetch(`/cart/remove/${productId}/${userId}`, {
                        method: 'DELETE',
                    })

                .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // 移除对应的商品行
                                this.closest('tr').remove();
                                updateGrandTotal();
                            } else {
                                alert('删除商品失败，请重试。');
                            }
                        })
                        .catch(error => console.error('Error:', error));
                }else{
                    //刷新页面
                    location.reload();
                }
            });
        });

        // 清空购物车
        document.querySelector('.clear-cart').addEventListener('click', function(event) {

            event.preventDefault();
            if (confirm('确定要清空购物车吗？')) {
                fetch(`/cart/clear`, {
                    method: 'DELETE',
                })

                    .then(response => {
                        if (1) {
                            // 清空购物车表格
                            alert('清空购物车成功。')
                            document.querySelector('.cart-table tbody').innerHTML = '';
                            updateGrandTotal();
                        } else {
                            alert('清空购物车失败，请重试。');
                        }
                    })

            }
        });

        // 更新总价
        function updateGrandTotal() {
            let grandTotal = 0;
            document.querySelectorAll('.subtotal').forEach(subtotal => {
                grandTotal += parseFloat(subtotal.textContent);
            });
            document.getElementById('grand-total').textContent = `$${grandTotal.toFixed(2)}`;
        }
    });



</script>







<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 初始化总价
        calculateGrandTotal();

        // 监听复选框点击事件
        document.querySelectorAll('.cart-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', calculateGrandTotal);
        });

        // 监听增加和减少按钮点击事件
        document.querySelectorAll('.product-qty__increment, .product-qty__decrement').forEach(button => {
            button.addEventListener('click', function () {
                const input = this.parentElement.querySelector('.product-qty__value');
                const productid = input.getAttribute('data-productid');
                const currentValue = parseInt(input.value);

                // 计算新的数量
                let newQuantity = currentValue;
                if (this.classList.contains('product-qty__increment')) {
                    newQuantity += 1;
                } else if (this.classList.contains('product-qty__decrement') && currentValue > 1) {
                    newQuantity -= 1;
                }

                // 发送 AJAX 请求更新购物车
                updateCart(productid, newQuantity, input);
            });
        });
    });

    // 更新小计
    function updateSubtotal(input) {
        const row = input.closest('tr');
        const unitPrice = parseFloat(row.querySelector('.unit-price').textContent);
        const quantity = parseInt(input.value);
        const subtotal = unitPrice * quantity;

        row.querySelector('.subtotal').textContent = subtotal.toFixed(2);
    }

    // 计算总价
    function calculateGrandTotal() {
        let grandTotal = 0;

        document.querySelectorAll('.cart-checkbox').forEach(checkbox => {
            if (checkbox.checked) {
                const row = checkbox.closest('tr');
                const subtotal = parseFloat(row.querySelector('.subtotal').textContent);
                grandTotal += subtotal;
            }
        });

        document.getElementById('grand-total').textContent = `$${grandTotal.toFixed(2)}`;
    }

    // 更新购物车
    function updateCart(productid, quantity, input) {
        const userid = document.querySelector("input[name='userid']").value;

        fetch("updateCart", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify([{
                userid: userid,
                productid: productid,
                number: quantity
            }])
        })
            .then(response => response.json()) // 假设后端返回更新后的购物车数据
            .then(data => {
                console.log("购物车更新成功");

                // 更新前端 UI
                input.value = quantity; // 更新数量
                updateSubtotal(input); // 更新小计
                calculateGrandTotal(); // 更新总价
            })
            .catch(error => {
                console.error("Error:", error);
                alert("更新失败，请重试。");
            });
    }
</script>

<script>
    // 监听“前往结账”按钮点击事件
    document.getElementById('checkout-button').addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认跳转行为

        // 收集选中的商品信息
        const selectedItems = [];
        document.querySelectorAll('.cart-checkbox:checked').forEach(checkbox => {
            const row = checkbox.closest('tr');
            const productid = row.querySelector("input[name='productid']").value;
            const quantity = row.querySelector('.product-qty__value').value;
            const price= row.querySelector('.unit-price').textContent;
            selectedItems.push({
                productid: productid,
                quantity: quantity,
                price:price
            });
        });

        // 如果没有选中商品，提示用户
        if (selectedItems.length === 0) {
            alert("请至少选择一件商品");
            return;
        }

        // 发送 AJAX 请求
        checkout(selectedItems);
    });


    function checkout(selectedItems) {
        const userid = document.querySelector("input[name='userid']").value;

        fetch("checkout", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                userid: userid,
                items: selectedItems
            })
        })
            .then(response => response.json())
            .then(data => {
                console.log("结账成功");
                // 跳转到结账页面
                window.location.href = "check-out.html";
            })
            .catch(error => {
                console.error("Error:", error);
                alert("结账失败，请重试。");
            });
    }



</script>













<!--============================feature section start here =======================-->
<div class="feature-section bg-img py-60" style="background-image: url(../static/assets/picture/feature-img.png);">
    <div class="container">
        <div class="row gy-4">
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f04.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FREE SHIPPING
                        </h5>
                        <span class="feature-item__payment"> For All Order Over $99 </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f03.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FRIENDLY SUPPORT
                        </h5>
                        <span class="feature-item__payment"> 24/7 Customer Support </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f02.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SECURE PAYMENT
                        </h5>
                        <span class="feature-item__payment">100%  Secure Payment</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f01.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SHIPPING & RETURN
                        </h5>
                        <span class="feature-item__payment"> within 30days For Refund </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- ==========================feature setion end here ============================-->


<!-- ========footer===== -->

<!-- ==================== Footer Start Here ==================== -->
<footer class="footer-area section-bg-light bg-img">
    <div class="pb-60 pt-120">
        <div class="container">
        <div class="row justify-content-center gy-5">
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <div class="footer-item__logo">
                            <a href="index.html"> <img src="assets/picture/footer-logo02.png" alt=""></a>
                        </div>
                        <p class="footer-item__desc"> Maecenas tempus tellus eget cdimentum rhoncus sem quam semper </p>
                        <ul class="social-list">
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i class="fab fa-facebook-f"></i></a> </li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-twitter"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-linkedin-in"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-pinterest-p"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Pages </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="about.html" class="footer-menu__link"> About Us</a></li>
                            <li class="footer-menu__item"><a href="faq.html" class="footer-menu__link"> Faq</a></li>
                            <li class="footer-menu__item"><a href="" class="footer-menu__link">Shopping Cart </a></li>
                            <li class="footer-menu__item"><a href="blog.html" class="footer-menu__link"> Blog</a></li>
                            <li class="footer-menu__item"><a href="product-two-details.html" class="footer-menu__link"> Product Details</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Useful link </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="product-category.html" class="footer-menu__link"> Product Category </a></li>
                            <li class="footer-menu__item"><a href="check-out.html" class="footer-menu__link">Checkout </a></li>
                            <li class="footer-menu__item"><a href="login.html" class="footer-menu__link">Login </a></li>
                            <li class="footer-menu__item"><a href="registration.html" class="footer-menu__link"> Registration </a></li>
                            <li class="footer-menu__item"><a href="contact.html" class="footer-menu__link"> Contact Us </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title">Subscribe now</h5>
                        <div class="subscriber-form mb-3">
                            <input type="text" class=" form--control style-two" placeholder="Email Address" aria-label="Recipient's username">
                            <button class="btn btn--base subscribe-button"><i class="fas fa-paper-plane"></i></button>
                          </div>
                          <p>Subscribe to our newsletter and get 10% off your first purchase..</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- Footer Top End-->
  
    <!-- bottom Footer -->
    <div class="bottom-footer section-bg py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bottom-footer__text">  Copyright &copy; 2023 . All rights reserved by Viserpet.</div>
                </div>
            </div>
        </div>
    </div>
  </footer>
  <!-- ==================== Footer End Here ==================== -->
  

<!-- Jquery js -->
<script data-cfasync="false" src="assets/js/email-decode.min.js"></script><script src="assets/js/jquery-3.6.1.min.js"></script>
<!-- Popper js -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- countdown js -->
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.throttle.js"></script>
<script src="assets/js/jquery.classycountdown.min.js"></script>
<!-- range js -->
<script src="assets/js/jquery-ui.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
 <!-- main js -->
 <script src="assets/js/main.js"></script>

</body>
</html>
